<template>
  <div class="wrapper">
    <div class="bar">
      <!-- <slot name="back"></slot> -->
      <slot ></slot>
      <span>
        猫眼电影
      </span>
      <i @click.stop="handleClick" />

    </div>
    <div class="nav" v-show="$store.state.showNav">
      <ul>
        <li>首页</li>
        <li @click="$router.push('/home/movie/classic-movie')">经典电影</li>
        <li>热点</li>
      </ul>
    </div>
  </div>

</template>

<script>
export default {
  methods:{
    handleClick(){
      this.$store.commit('setShowNav',true)
    }
  }
}
</script>


<style lang="scss" scoped>
.wrapper {
  position: relative;
  .nav {
    position: absolute;
    top: 40px;
    right: 20px;
    width: 110px;
    background: white;
    z-index: 1;
  }
}
.bar {
  height: 50px;
  background: #e54847;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 10px;

  span {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: white;
    font-weight: 200;
  }
  i {
    width: 20px;
    height: 20px;
    display: block;
    &:last-child {
      background: url("../assets/images/menu.png");
      background-size: cover;
    }
  }
}
</style>

